<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>瀑布流布局演示</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
            color: white;
        }

        .header h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .header p {
            font-size: 1.1rem;
            opacity: 0.9;
        }

        .controls {
            text-align: center;
            margin-bottom: 30px;
        }

        .btn {
            background: rgba(255,255,255,0.2);
            border: 2px solid rgba(255,255,255,0.3);
            color: white;
            padding: 10px 20px;
            margin: 0 10px;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 14px;
        }

        .btn:hover {
            background: rgba(255,255,255,0.3);
            transform: translateY(-2px);
        }

        .btn.active {
            background: rgba(255,255,255,0.4);
            border-color: rgba(255,255,255,0.6);
        }

        .masonry {
            position: relative;
            margin: 0 auto;
            width: 100%;
        }

        .masonry-column {
            float: left;
            width: calc(33.333% - 13.33px);
            margin-right: 20px;
        }

        .masonry-column:last-child {
            margin-right: 0;
        }

        .masonry-item {
            margin-bottom: 20px;
            border-radius: 15px;
            overflow: hidden;
            background: white;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            transition: all 0.3s ease;
            animation: fadeInUp 0.6s ease forwards;
        }

        .masonry-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(0,0,0,0.3);
        }

        .masonry-item img {
            width: 100%;
            height: auto;
            display: block;
        }

        .masonry-content {
            padding: 20px;
        }

        .masonry-title {
            font-size: 1.2rem;
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }

        .masonry-description {
            color: #666;
            line-height: 1.6;
            margin-bottom: 15px;
        }

        .masonry-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.9rem;
            color: #999;
        }

        .masonry-date {
            background: #f0f0f0;
            padding: 5px 10px;
            border-radius: 15px;
        }

        .masonry-category {
            background: linear-gradient(45deg, #667eea, #764ba2);
            color: white;
            padding: 5px 10px;
            border-radius: 15px;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .header h1 {
                font-size: 2rem;
            }
        }

        @media (max-width: 480px) {
            .header h1 {
                font-size: 1.5rem;
            }
            
            .btn {
                margin: 5px;
                padding: 8px 16px;
            }
        }

        /* 加载动画 */
        .loading {
            text-align: center;
            color: white;
            font-size: 1.2rem;
            margin: 50px 0;
        }

        .spinner {
            display: inline-block;
            width: 40px;
            height: 40px;
            border: 4px solid rgba(255,255,255,0.3);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 1s ease-in-out infinite;
            margin-right: 10px;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>瀑布流布局演示</h1>
            <p>响应式瀑布流布局，支持动态加载和筛选</p>
        </div>

        <div class="controls">
            <button class="btn active" data-filter="all">全部</button>
            <button class="btn" data-filter="nature">自然</button>
            <button class="btn" data-filter="city">城市</button>
            <button class="btn" data-filter="food">美食</button>
            <button class="btn" data-filter="travel">旅行</button>
            <button class="btn" onclick="loadMore()">加载更多</button>
        </div>

        <div class="masonry" id="masonry">
            <!-- 瀑布流内容将通过JavaScript动态生成 -->
        </div>

        <div class="loading" id="loading" style="display: none;">
            <div class="spinner"></div>
            正在加载更多内容...
        </div>
    </div>

    <script>
        // 模拟数据
        const items = [
            {
                id: 1,
                title: "美丽的自然风景",
                description: "这是一张令人心旷神怡的自然风景照片，展现了大自然的鬼斧神工。",
                image: "https://picsum.photos/400/300?random=1",
                category: "nature",
                date: "2024-01-15"
            },
            {
                id: 2,
                title: "现代都市夜景",
                description: "繁华的都市夜景，灯火辉煌，展现了现代城市的魅力。",
                image: "https://picsum.photos/400/500?random=2",
                category: "city",
                date: "2024-01-14"
            },
            {
                id: 3,
                title: "精致美食展示",
                description: "色香味俱全的美食，让人垂涎欲滴，展现了烹饪的艺术。",
                image: "https://picsum.photos/400/350?random=3",
                category: "food",
                date: "2024-01-13"
            },
            {
                id: 4,
                title: "旅行目的地",
                description: "令人向往的旅行目的地，充满了异域风情和文化魅力。",
                image: "https://picsum.photos/400/450?random=4",
                category: "travel",
                date: "2024-01-12"
            },
            {
                id: 5,
                title: "山间小溪",
                description: "清澈的山间小溪，流水潺潺，是大自然最纯净的馈赠。",
                image: "https://picsum.photos/400/280?random=5",
                category: "nature",
                date: "2024-01-11"
            },
            {
                id: 6,
                title: "城市建筑",
                description: "现代建筑艺术的杰作，展现了人类智慧和创造力的结晶。",
                image: "https://picsum.photos/400/400?random=6",
                category: "city",
                date: "2024-01-10"
            },
            {
                id: 7,
                title: "传统美食",
                description: "传承百年的传统美食，承载着深厚的文化底蕴和历史记忆。",
                image: "https://picsum.photos/400/320?random=7",
                category: "food",
                date: "2024-01-09"
            },
            {
                id: 8,
                title: "海滩度假",
                description: "阳光、沙滩、海浪，完美的海滩度假体验。",
                image: "https://picsum.photos/400/380?random=8",
                category: "travel",
                date: "2024-01-08"
            },
            {
                id: 9,
                title: "森林晨雾",
                description: "晨雾缭绕的森林，神秘而宁静，是大自然的诗篇。",
                image: "https://picsum.photos/400/420?random=9",
                category: "nature",
                date: "2024-01-07"
            },
            {
                id: 10,
                title: "城市公园",
                description: "城市中的绿色绿洲，为都市生活带来一丝清新。",
                image: "https://picsum.photos/400/300?random=10",
                category: "city",
                date: "2024-01-06"
            },
            {
                id: 11,
                title: "创意料理",
                description: "充满创意的现代料理，将传统与创新完美融合。",
                image: "https://picsum.photos/400/360?random=11",
                category: "food",
                date: "2024-01-05"
            },
            {
                id: 12,
                title: "古城探索",
                description: "历史悠久的古城，每一块石头都诉说着古老的故事。",
                image: "https://picsum.photos/400/440?random=12",
                category: "travel",
                date: "2024-01-04"
            }
        ];

        let currentFilter = 'all';
        let displayedItems = [...items];

        // 初始化页面
        function init() {
            renderItems(displayedItems);
            setupEventListeners();
        }

        // 渲染瀑布流项目
        function renderItems(itemsToRender) {
            const masonry = document.getElementById('masonry');
            masonry.innerHTML = '';

            // 获取列数
            const columnCount = getColumnCount();
            
            // 创建列
            const columns = [];
            for (let i = 0; i < columnCount; i++) {
                const column = document.createElement('div');
                column.className = 'masonry-column';
                masonry.appendChild(column);
                columns.push(column);
            }

            // 将项目分配到高度最低的列中
            itemsToRender.forEach((item, index) => {
                const itemElement = createItemElement(item, index);
                
                // 找到高度最低的列
                let minHeight = Infinity;
                let shortestColumnIndex = 0;
                
                columns.forEach((column, columnIndex) => {
                    const columnHeight = column.offsetHeight;
                    if (columnHeight < minHeight) {
                        minHeight = columnHeight;
                        shortestColumnIndex = columnIndex;
                    }
                });
                
                // 将项目添加到高度最低的列
                columns[shortestColumnIndex].appendChild(itemElement);
            });
        }

        // 获取当前屏幕尺寸下的列数
        function getColumnCount() {
            return 3; // 固定3列
        }

        // 创建单个项目元素
        function createItemElement(item, index) {
            const div = document.createElement('div');
            div.className = 'masonry-item';
            div.style.animationDelay = `${index * 0.1}s`;
            div.setAttribute('data-category', item.category);

            div.innerHTML = `
                <img src="${item.image}" alt="${item.title}" loading="lazy">
                <div class="masonry-content">
                    <h3 class="masonry-title">${item.title}</h3>
                    <p class="masonry-description">${item.description}</p>
                    <div class="masonry-meta">
                        <span class="masonry-date">${item.date}</span>
                        <span class="masonry-category">${getCategoryName(item.category)}</span>
                    </div>
                </div>
            `;

            return div;
        }

        // 获取分类名称
        function getCategoryName(category) {
            const categoryNames = {
                'nature': '自然',
                'city': '城市',
                'food': '美食',
                'travel': '旅行'
            };
            return categoryNames[category] || category;
        }

        // 设置事件监听器
        function setupEventListeners() {
            const filterButtons = document.querySelectorAll('.btn[data-filter]');
            filterButtons.forEach(button => {
                button.addEventListener('click', (e) => {
                    const filter = e.target.getAttribute('data-filter');
                    filterItems(filter);
                    
                    // 更新按钮状态
                    filterButtons.forEach(btn => btn.classList.remove('active'));
                    e.target.classList.add('active');
                });
            });
        }

        // 筛选项目
        function filterItems(filter) {
            currentFilter = filter;
            
            if (filter === 'all') {
                displayedItems = [...items];
            } else {
                displayedItems = items.filter(item => item.category === filter);
            }
            
            renderItems(displayedItems);
        }

        // 加载更多内容
        function loadMore() {
            const loading = document.getElementById('loading');
            loading.style.display = 'block';

            // 模拟加载延迟
            setTimeout(() => {
                // 生成新的随机项目
                const newItems = generateRandomItems(6);
                items.push(...newItems);
                
                // 根据当前筛选条件更新显示
                if (currentFilter === 'all') {
                    displayedItems = [...items];
                } else {
                    displayedItems = items.filter(item => item.category === currentFilter);
                }
                
                renderItems(displayedItems);
                loading.style.display = 'none';
            }, 1500);
        }

        // 生成随机项目
        function generateRandomItems(count) {
            const categories = ['nature', 'city', 'food', 'travel'];
            const titles = [
                '新的自然发现', '城市新视角', '美食新体验', '旅行新目的地',
                '自然奇观', '都市风情', '味觉盛宴', '探索之旅',
                '自然之美', '城市之光', '美食艺术', '冒险之旅'
            ];
            const descriptions = [
                '这是一个全新的发现，展现了不同的视角和体验。',
                '从新的角度观察城市，发现不一样的美。',
                '创新的美食体验，带来全新的味觉享受。',
                '探索新的旅行目的地，开启新的冒险。'
            ];

            const newItems = [];
            for (let i = 0; i < count; i++) {
                const category = categories[Math.floor(Math.random() * categories.length)];
                const title = titles[Math.floor(Math.random() * titles.length)];
                const description = descriptions[Math.floor(Math.random() * descriptions.length)];
                
                newItems.push({
                    id: items.length + i + 1,
                    title: title,
                    description: description,
                    image: `https://picsum.photos/400/${300 + Math.random() * 200}?random=${items.length + i + 1}`,
                    category: category,
                    date: new Date().toISOString().split('T')[0]
                });
            }
            
            return newItems;
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', init);

        // 移除窗口大小改变监听，因为现在是固定3列
    </script>
</body>
</html>
